<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>新建用户</title>
</head>
<body>
<div th:fragment="main" id="addUser" class="addUser">
    <style>
        .content {
            position: relative;
            width: auto;
        }

        .addUser {
            margin: 5px;
            padding: 0 15px;
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            background-color: #fff;
            border: 1px solid #eaeaea;
            border-radius: 5px;
            overflow: auto;
            box-shadow: 0px 1px 5px #333;
        }

        .addUser .title {
            padding: 18px 0px 10px;
            height: 65px;
            border-bottom: 1px solid #DDD;
            font-size: 14px;
        }

        .addUser .title .title-content {
            margin: 0;
            padding: 5px 10px;
            list-style: none;
            color: #000;
            background-color: #fff;
            border-radius: 0;
            border-left: 2px solid #88B7E0;
        }

        .addUser .title .title-content li > a {
            color: #000;
        }

        .addUser .title .title-content li > a:hover {
            color: #88B7E0;
        }

        .alert-info {
            padding: 8px 12px;
            margin-top: 16px;
            border: 1px solid transparent;
            border-radius: 0px;
            color: #555;
            background-color: #F9F9F9;
            border-color: #DDD;
        }

        .alert-info b {
            color: #337ab7;
        }

        .alert-info span i {
            color: #F00;
        }

        .userinfo {
            margin-top: 40px;
            font-size: 14px;
        }

        .userinfo .form-group {
            margin-bottom: 30px;
        }

        .userinfo .text-title {
            color: #F00;
        }

        .userinfo .footer {
            margin-top: 35px;
        }

        .userinfo .save {
            margin-right: 10px;
        }

        .form-control[readonly] {
            background-color: #fff;
            font-size: 14px;
        }

        /*返回按钮  */
        .back {
            display: inline-block;
            float: right;
            position: relative;
            margin-right: 10px;
            width: 40px;
            height: 28px;
            line-height: 28px;
            text-align: center;
            color: #fff;
            background: #337ab7;
            border: 1px solid #337ab7;
            border-left: none;
            border-radius: 5px;
        }

        .back:after {
            position: absolute;
            content: " ";
            border: transparent 13px solid;
            border-width: 12px 8px;
            border-right-color: #337ab7;
            top: 1px;
            left: -15px;
            height: 0;
            width: 0;
        }

        .back:hover {
            background: #286090;
        }

        .back:hover:after {
            border-right-color: #286090;
        }

        /*ztree样式  */
        ul.ztree {
            margin-top: 0;
            width: 99.9%;
            height: 200px;
            border: 1px solid #617775;
            background: #f0f6e4;
            overflow-y: scroll;
            overflow-x: auto;
        }

        /*多选框样式  */
        /* .roles {
             padding: 0;
             border: none;
             width: 100% !important;
             height: 34px;
         }
         .roles button {
             border: 1px solid #c2cad8;
             height: 34px;
         }
         .roles button div {
             top: 3px;
             color: #000;
         }
         .roles .ms-drop {
             margin-top: 0px;
         }
         .roles .ms-choice span {
             padding-top: 5px;
             padding-left: 10px;
         }
         .roles .ms-choice > span.placeholder {
             color: #555;
             padding-left: 18px;
             padding-top: 4px;
         }
         .roles .ms-drop input[type="checkbox"] {
             vertical-align: top;
             margin-right: 6px;
         }   */
    </style>
    <div class="title">
        <ol class="breadcrumb title-content pull-left">
            <li><a href="#platform-userGroup-user">用户管理</a></li>
            <li>新建用户</li>
        </ol>
        <a href="#platform-userGroup-user" class="back">返回</a>
    </div>
    <div class="alert-info">
        <b>提醒：</b>
        <span class="alert-content">以下所填信息中，带&nbsp;<i>*</i>&nbsp;的为必填项，其它为选填项。</span>
    </div>
    <div class="userinfo">
        <form action="" class="form-horizontal col-xs-offset-2" id="add_form">
            <div class="form-group">
                <label for="" class="col-sm-3 control-label"><span class="text-title">*</span>&nbsp;用户登录名</label>
                <div class="col-sm-5">
                    <input name="username" type="text" class="form-control input-sm" id="userName" maxlength="25">
                </div>
            </div>
            <div class="form-group">
                <label for="" class="col-sm-3 control-label"><span class="text-title">*</span>&nbsp;登录密码</label>
                <div class="col-sm-5">
                    <input name="password" type="password" class="form-control input-sm" autocomplete="new-password"
                           id="passWord" maxlength="50">
                </div>
            </div>
            <div class="form-group">
                <label for="" class="col-sm-3 control-label"><span class="text-title">*</span>&nbsp;用户名</label>
                <div class="col-sm-5">
                    <input name="displayName" type="text" class="form-control input-sm" id="displayName" maxlength="25">
                </div>
            </div>
            <!-- <div class="form-group">
                <label for="" class="col-sm-3 control-label"><span class="text-title">*</span>&nbsp;用户类型</label>
                <div class="col-sm-5">
                    <select class="form-control" name="authType" id="authType">
                        <option value="" disabled selected>-- 选择用户类型 --</option>
                        <option value="1">系统管理员</option>
                        <option value="2">区域管理员</option>
                        <option value="3">普通用户</option>
                    </select>
                </div>
            </div> -->
            <!-- <div class="form-group">
                <label for="" class="col-sm-3 control-label"><span class="text-title">*</span>&nbsp;用户头衔</label>
                <div class="col-sm-5">
                    <input name="title" type="text" class="form-control input-sm" id="userTitle" maxlength="25">
                </div>
            </div> -->
            <div class="form-group">
                <label for="" class="col-sm-3 control-label"><span class="text-title">*</span>&nbsp;角色类型</label>
                <div class="col-sm-5">
                    <!-- <select class="form-control roles" id="roles" multiple="multiple"> -->
                    <!-- 多选选项 -->
                    <!-- </select> -->
                    <select class="form-control" name="roles" id="roles">
                        <option value="" disabled selected>-- 选择角色类型 --</option>
                    </select>
                </div>
            </div>
            <div class="form-group" id="organizationGroup" style="display: none">
                <label for="" class="col-xs-3 control-label"><span class="text-title">*</span>&nbsp;所属组织机构</label>
                <div class="col-xs-5">
                    <input id="organizationName" type="text" class="form-control input-sm" style="position:relative;"
                           readonly onclick="toggle();">
                    <div id="menuContent" class="col-xs-12 menuContent"
                         style="display:none; position: absolute;z-index:999;">
                        <ul id="treeDemo" class="ztree"></ul>
                    </div>
                </div>
            </div>
            <div class="form-group" id="productLineGroup" style="display: none">
                <label for="" class="col-xs-3 control-label"><span class="text-title">*</span>&nbsp;所属产品线</label>
                <div class="col-xs-5">
                    <select class="form-control" name="productLine" id="productLine">
                        <option value="" disabled selected>-- 选择产品线 --</option>
                    </select>
                </div>
            </div>

            <div class="form-group footer">
                <div class="col-xs-8">
                    <input type="button" value="取消" class="btn btn-default pull-right cancel" id="cancel">
                    <input type="button" value="保存" class="btn btn-primary pull-right save" id="save">
                </div>
            </div>
        </form>
    </div>
    <script>
        var orgData; // 组织机构数据变量
        // 组织机构树形结构
        var setting = {
            view: {
                dblClickExpand: false
            },
            data: {
                simpleData: {
                    enable: true
                }
            },
            callback: {
                onClick: onClick
            }
        };
        // 页面加载完成获取zTree数据
        $(document).ready(getZtree());

        // zTree加载数据
        function getZtree() {
            $('#add_form')[0].reset();
            $.ajax({
                url: contextPath + "/Organization/queryOrganizationTree",
                type: "get",
                cache: false,
                dataType: "json",
                success: function (data) {
                    zNodes = data;
                    zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
                },
                error: function (data) {
                    toastr.error("请求失败，请稍后再试!");
                }
            });
        }

        // zTree点击事件
        function onClick(e, treeId, treeNode) {
            var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
                nodes = zTree.getSelectedNodes(),
                v = "";
            orgData = nodes[0];
            nodes.sort(function compare(a, b) {
                return a.id - b.id;
            });
            for (var i = 0, l = nodes.length; i < l; i++) {
                v += nodes[i].name + ",";
            }
            if (v.length > 0) v = v.substring(0, v.length - 1);
            var cityObj = $("#organizationName");
            cityObj.attr("value", v);
            cityObj.val(v);
        }

        function toggle() {
            var menuContent = $("#menuContent");
            if (menuContent.css("display") == 'none') {
                $("#menuContent").css({left: 0 + "px", top: 31 + "px"}).slideDown("fast");
                $("body").bind("mousedown", onBodyDown);
            }
        }

        function hideMenu() {
            $("#menuContent").fadeOut("fast");
            $("body").unbind("mousedown", onBodyDown);
        }

        function onBodyDown(event) {
            if (!(event.target.id == "menuBtn" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length > 0)) {
                hideMenu();
            }
        }

        // 查询和选择 角色 列表初始化
        //            $('#roles').multipleSelect({
        //                width: '100%',
        //                placeholder: "-- 选择用户类型 --",
        //                selectAllText: "全选",
        //                filter: true, //查询
        //                countSelected: '已选中 # 个',
        //                allSelected: '全选'
        //            });
        getRole();

        function getRole() {
            var str = '';
            $.ajax({
                url: contextPath + "/Role/queryRole",
                type: "get",
                cache: false,
                dataType: "json",
                success: function (data) {
                    for (var i = 0, len = data.length; i < len; i++) {
                        str += '<option value=' + data[i].id + '>' + data[i].name + '</option>';
                    }
                    $("#roles").html(str);
                },
                error: function (data) {
                    toastr.error("请求失败，请稍后再试!");
                }
            });
        }

        $("#roles").change(function () {
            var role = $("#roles").val();
            if (role == 3) {//产品线角色
                getProductLine();
                $("#productLineGroup").show();
                $("#organizationGroup").hide();
            } else if (role == 4) {//施工队角色
                $("#productLineGroup").hide();
                $("#organizationGroup").show();
            } else {
                $("#productLineGroup").hide();
                $("#organizationGroup").hide();
            }
        });

        function getProductLine() {
            var str = '';
            $.ajax({
                url: contextPath + "/ProductLine/queryAllProductLine",
                type: "get",
                cache: false,
                dataType: "json",
                success: function (data) {
                    str += '<option value="" disabled selected>-- 选择产品线 --</option>';
                    for (var i = 0, len = data.length; i < len; i++) {
                        str += '<option value=' + data[i].id + '>' + data[i].name + '</option>';
                    }
                    $("#productLine").html(str);
                },
                error: function (data) {
                    toastr.error("请求失败，请稍后再试!");
                }
            });
        }

        // 转化为json格式
        function arrayToJson(formArray) {
            var dataArray = {};
            $.each(formArray, function () {
                if (dataArray[this.name]) {
                    if (!dataArray[this.name].push) {
                        dataArray[this.name] = [dataArray[this.name]];
                    }
                    dataArray[this.name].push(this.value || '');
                } else {
                    dataArray[this.name] = this.value || '';
                }
            });
            return JSON.stringify(dataArray);
        }

        // 新建
        $('#save').on('click', function () {
            var userName = $("#userName").val();
            var passWord = $("#passWord").val();
            var displayName = $("#displayName").val();
            var role = $("#roles").val();
            var organizationName = $("#organizationName").val();
            var productLineId = $("#productLine").val();

            if ($.trim(userName) == '' || $.trim(passWord) == '' || $.trim(displayName) == '') {
                toastr.error('创建失败！', '用户信息不全，请补充完整！');
                return;
            }

            if (role == 3 && $.trim(productLineId) == '') {//产品线人员必须选择产品线
                toastr.error('创建失败！', '用户信息不全，请补充完整！');
                return;
            }

            if (role == 4 && $.trim(organizationName) == '') {//施工队人员必须选择组织机构
                toastr.error('创建失败！', '用户信息不全，请补充完整！');
                return;
            }

            $("#roles").attr("disabled", "disabled");
            var formArray = $("#add_form").serializeArray();
            $("#roles").removeAttr("disabled");

            if (orgData == undefined || orgData == '' || role != 4) {
                orgData = {};
                orgData.id = 1;
                orgData.organizationCode = "000";
            }
            var organizationId = orgData.id,
                organizationCode = orgData.organizationCode;
            var datas = {};
            datas.name = 'organizationId';
            datas.value = organizationId;
            var orgCode = {};
            orgCode.name = 'organizationCode';
            orgCode.value = organizationCode;

            var obj = {};
            obj.id = parseInt(role);
            var rolesId = new Array();
            rolesId[0] = obj;
            var roles = {};
            roles.name = 'roles';
            roles.value = rolesId;
            var authType = {};
            authType.name = 'authType';
            authType.value = 1;
            if (role == 4) {
                authType.value = 3;
            }

            formArray.push(datas, orgCode, roles, authType);
            var formData = arrayToJson(formArray);
            $.ajax({
                url: contextPath + '/user/addUser',
                type: 'POST',
                data: formData,
                contentType: "application/json",
                success: function (data) {
                    if (data.code == 1) {
                        if (role == 3) {
                            var datap = {
                                userId: data.data.id,
                                productLineId: productLineId
                            };

                            $.ajax({
                                url: contextPath + '/user/addUserToProductLine',
                                type: 'POST',
                                data: JSON.stringify(datap),
                                contentType: "application/json",
                                success: function (data1) {
                                    if (data1.code == 1) {
                                        toastr.success('创建成功！');
                                        $('#add_form')[0].reset();
                                        $('#organizationName').val('');
                                        getZtree();
                                        location.hash = "platform-userGroup-user";
                                    } else {
                                        toastr.error('创建部分信息失败！', data1.message);
                                    }
                                },
                                error: function () {
                                    toastr.error("操作失败，请稍后再试！");
                                }
                            });
                        } else {
                            toastr.success('创建成功！');
                            $('#add_form')[0].reset();
                            $('#organizationName').val('');
                            getZtree();
                            location.hash = "platform-userGroup-user";
                        }
                    } else {
                        toastr.error('创建失败！', data.message);
                    }
                },
                error: function () {
                    toastr.error("操作失败，请稍后再试！");
                }
            });
        })
        ;

        // 取消
        $('#cancel').on('click', function () {
            $('#add_form')[0].reset();
            $('#organizationName').val('');
            orgData = '';
        });
    </script>
</div>
</body>
</html>